// 第一种编写方式，返回一个渲染函数【推荐】
// export default function () {
//   return (
//     <div>
//       <p>tsx&vite插件</p>
//     </div>
//   )
// }

// 第二中编写方式，options 选项方式
// import { defineComponent } from 'vue';

// export default defineComponent({
//   data() {
//     return {
//       age:27
//     }
//   },

//   render() {
//     return (
//       <div>
//         <p>tsx&vite插件</p>
//         <p>{this.age}</p>
//       </div>
//     )
//   }
// })

// 第三种编写方式，setup 函数方式【推荐】
/*
  v-show 支持
  v-if不支持 三元表达式去代替
  tsx 并不会 ref.value 需要自己手动加
  遍历渲染组件用 map
*/
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const flag = ref(true)

    return () => (
      <>
        <div>{flag.value ? <h2>true</h2> : <h2>false</h2>}</div>
      </>
      )
  }
})
